<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<th:block id="pagin" th:fragment="pagin (refreshForm)">
    <style type="text/css">
        .page {font-weight: 900;height: 40px;text-align: center;color: #888;margin: 20px auto 0;background: #f2f2f2;}
        .pagelist {font-size: 0;background: #fff;height: 50px;line-height: 50px;}
        .pagelist span {font-size: 14px;}
        .pagelist .jump {border: 1px solid #ccc;padding: 5px 8px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;cursor: pointer;margin-left: 5px;}
        .pagelist .bgprimary {cursor: default;color: #fff;background: #337ab7;border-color: #337ab7;}
        .jumpinp input {width: 55px;height: 26px;font-size: 13px;border: 1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;text-align: center;}
        .ellipsis {padding: 0px 8px;}
        .jumppoint {margin-left: 30px;}
        .pagelist .gobtn {font-size: 12px;}
        .bgprimary {cursor: default;color: #fff;background: #337ab7;border-color: #337ab7;}
        .pagelist .jump.disabled {pointer-events: none;background: #ddd;}
        .page_select {width: 50px;height: 30px;border: 1px;border-style: solid;border-color: #d5d5d5;border-radius: 5px;}
    </style>
    <div id="pagePlugIn">
        <div>
            <div class="page" v-show="show">
                <div class="pagelist">
                    <span class="jump" :class="{disabled:pstart}" @click="pageUp()">上一页</span>
                    <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
                    <span class="ellipsis" v-show="efont">...</span>
                    <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{{num}}</span>
                    <span class="ellipsis" v-show="ebehind">...</span>
                    <span :class="{disabled:pend}" class="jump" @click="pageDown()">下一页</span>
                    <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
                    <span class="jumppoint" >共<span style="color: red;" th:text="${pageInfo.total}"></span>条记录</span>
                    <span class="jumppoint">页大小：</span>
                    <select id="select_PageSize" οnchange="select_PageSize();" class="page_select">
                        <option value="5" th:selected="${pageInfo.pageSize eq 5}">5</option>
                        <option value="15" th:selected="${pageInfo.pageSize eq 15}">15</option>
                        <option value="20" th:selected="${pageInfo.pageSize eq 20}">20</option>
                        <option value="50" th:selected="${pageInfo.pageSize eq 50}">50</option>
                        <option value="100" th:selected="${pageInfo.pageSize eq 100}">100</option>
                    </select>
                    <span class="jumppoint">跳转到：</span>
                    <span class="jumpinp"><input type="text" v-model="changePage"></span>
                    <span class="jump gobtn" @click="jumpPage(changePage)">跳转</span>
                </div>
            </div>
        </div>
        <input type="hidden" id="pageInfo_pageNum" th:value="${pageInfo.pageNum}" />
        <input type="hidden" id="pageInfo_pageSize" th:value="${pageInfo.pageSize}" />
    </div>
    <script th:src="@{../../static/js/vue.js}"></script>
    <script type="text/javascript">
        /**
         * 初始化分页插件
         */
        var newlist = new Vue({
            el : '#pagePlugIn',
            data : {
                current_page : [[${pageInfo.pageNum}]], //当前页
                pages : [[${pageInfo.pages}]], //总页数
                //pages : 3, //总页数
                changePage : '', //跳转页
                nowIndex : 1
            },
            computed : {
                show : function() {
                    return true
                },
                pstart : function() {
                    return this.current_page == 1;
                },
                pend : function() {
                    return this.current_page == this.pages;
                },
                efont : function() {
                    if (this.pages <= 7) return false;
                    return this.current_page > 5
                },
                ebehind : function() {
                    if (this.pages <= 7) return false;
                    var nowAy = this.indexs;
                    return nowAy[nowAy.length - 1] != this.pages;
                },
                indexs : function() {
                    var left = 1,
                        right = this.pages,
                        ar = [];
                    if (this.pages >= 7) {
                        if (this.current_page > 5 && this.current_page < this.pages - 4) {
                            left = Number(this.current_page) - 3;
                            right = Number(this.current_page) + 3;
                        } else {
                            if (this.current_page <= 5) {
                                left = 1;
                                right = 7;
                            } else {
                                right = this.pages;

                                left = this.pages - 6;
                            }
                        }
                    }
                    while (left <= right) {
                        ar.push(left);
                        left++;
                    }
                    return ar;
                },
            },
            methods : {
                jumpPage : function(id) {//跳转指定页数方法
                    if(id){
                        this.current_page = id;
                        refreshList(id, $("#select_PageSize option:selected").val());
                    }
                },
                pageUp : function(){//上一页
                    this.current_page--;
                    var pageSize = $("#pageInfo_pageSize").val();
                    var pageNum = Number($("#pageInfo_pageNum").val()) - 1;
                    refreshList(pageNum, pageSize);
                },
                pageDown : function(){//下一页
                    this.current_page++;
                    var pageSize = $("#pageInfo_pageSize").val();
                    var pageNum = Number($("#pageInfo_pageNum").val()) + 1;
                    refreshList(pageNum, pageSize);
                }
            },
        });
        //刷新列表
        function refreshList(nextPageNum, pageSize){
            var refreshForm = '[[${refreshForm}]]';
            //console.log(nextPageNum+"::"+pageSize+"::"+refreshForm);
            if(nextPageNum && nextPageNum > 0 && pageSize && pageSize > 0){
                if(nextPageNum <= 0){
                    nextPageNum = 1;
                }
                var pages = Number([[${pageInfo.pages}]]);
                if(nextPageNum >= pages){
                    nextPageNum = pages;
                }
                $("#"+refreshForm + " #pageNum").val(nextPageNum);
                $("#"+refreshForm + " #pageSize").val(pageSize);
                $("#"+refreshForm).submit();
            }
        }
        //更新页大小
        function select_PageSize(){
            refreshList([[${pageInfo.pageNum}]], $("#select_PageSize option:selected").val());
        }
    </script>
</th:block>